<template>
  <div id="header">
    <div class="header-nav">
      <a href="/">
        <img class="logo" src="@/assets/imgs/logo.png" alt="中软国际">
      </a>
      <div class="menu">
        <div v-if="showNav">
          <TitleView />
          <NavView :showMenu="showMenu"
          @mouseleaveHandler="mouseleaveHandler"
          @mouseenterHandler="mouseenterHandler"
        />
        </div>
        <HiddenNav v-else @click="showNavHandler" />
      </div>
    </div>
    <NavMenu class="nav-menu" :menuItems="menuItem" v-show="showMenu"
      @mouseleave = "showMenu = false"
      @mouseenter = "showMenu = true"
    />
    <BannerView class="banner" />
  </div>


</template>
<script setup lang="ts">
  import TitleView from '@/components/headerModule/TitleView.vue'
  import NavView from '@/components/headerModule/NavView.vue'
  import HiddenNav from '@/components/headerModule/HiddenNav.vue'

  import { ref } from 'vue'
  import NavMenu from './NavMenu.vue'
  import BannerView from './BannerView.vue'

  const showMenu = ref(false)

  const showNav = ref(false)


  const observer = new ResizeObserver((entries) => {
    const width = entries[0].contentRect.width

    if (width > 768) {
      showNav.value = true
    } else {
      showNav.value = false
    }
  })

  observer.observe(document.body)



  const showNavHandler = () => {

  }


  const menuItem = ref<{ type: string, path: string }[]>([])

  const mouseenterHandler = (props: { type: string, path: string }[]) => {
    if (props.length == 0) {
      return
    }
    showMenu.value = true
    menuItem.value = props
  }
  const mouseleaveHandler = () => {
    showMenu.value = false
  }



</script>
<style scoped>




  @media (max-width: 768px) {
    .header-nav {
      height: 50px;
      width: 96%;
      justify-content: space-evenly;
      align-items: center;

      a {
        .logo {
          height: 30px;
        }
      }

      .menu {
        text-align: end;
      }
    }

  }

  @media (min-width: 768px) {
    .header-nav {
      height: 114px;
      width: 80%;

      a {
        align-self: end;

        .logo {
          height: 48px;
        }
      }

    }
  }



  #hedar {
    position: relative;
  }

  .header-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 0 auto;

    box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
  }

  .nav-menu {
    z-index: 1;
    position: absolute;
  }

  .banner {
    position: relative;
  }

</style>
